﻿<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <title>台风灾害应急专题</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">   
      <script src="/js/jquery-3.1.1.js"></script>
      <script type="text/javascript">
          dojoConfig = {
              parseOnLoad: true,
              packages: [{
                  name: 'tdlib',
                  location: "/js/tdlib"
              }]
          };
      </script>
      <link href="css/esri.css" rel="stylesheet" />
      <link href="css/index.css" rel="stylesheet" />     
      <link rel="stylesheet" href="http://ngac.org.cn/jsapi/arcgis/3.9/js/dojo/dijit/themes/claro/claro.css" />
      <script type="text/javascript" src="http://ngac.org.cn/jsapi/arcgis/3.9/"></script>
    <link href="css/bootstrap.css" rel="stylesheet">   
    <link href="css/custom.css" rel="stylesheet">
    <link rel="stylesheet" id="theme" href="css/theme3.css" type="text/css" />   
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">  
    <link rel="stylesheet" href="css/jquery.bxslider.css" type="text/css" />
    <link rel="stylesheet" media="screen" href="css/sequence-slider.css" />
    <link rel="stylesheet" href="css/magnific-popup.css"> 
    <link rel="stylesheet" href="css/color.switch.css" type="text/css" />
    <link rel="stylesheet" href="css/top.css" type="text/css" />
    <link rel="shortcut icon" href="img/favicon.ico">
	<link rel="apple-touch-icon" href="img/apple-touch-icon.png">
	<link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72x72.png">
	<link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114x114.png">
	
	<!-- Your Google Analytics Code Here!! -->
  </head>
<body>
<div class="button-top" id="top-bt">
  <a href="#about"><i class="fa fa-sort-desc fa-3x"></i></a>
</div>
<nav class="navbar navbar-inverse navbar-static-top" role="navigation" id="menu">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
            </div>
           <!-- MENU LINKS -->
           <div class="navbar-collapse collapse">
              <ul class="nav navbar-nav" id="navigation">
                <li><a href="#about">地图展示</a></li>
                <li><a href="#service">资料展示</a></li>                            
                <li><a href="#contact">留言</a></li>
              </ul>
          </div>
        </div>
</nav>

<!-- NAVBAR END -->
  
<!-- SEQUENCE SLIDER Change Styles at the sequence-slider.css file --> 

<div id="top-slider">
	<div class="slider-bg"></div>
		   <div class="container">		
           <div id="sequence">              
				<ul class="sequence-canvas">
					<li class="animate-in">
						<h1 class="title">台风自然灾害应急专题</h1>
						<h2 class="subtitle">浙江温州9级台风灾害</h2>
                       
					</li>
				</ul>				
          </div>
    </div>
</div>

<!-- SEQUENCE SLIDER END -->
   
<!-- ABOUT US -->
      
<div id="about">

 <div class="container">

     <div class="col-lg-12 col-md-12 col-xs-12">

         <h1>台风信息</h1>
         <h4 class="service-col h4">刮风时刻： 2017-08-08 21:19:46&nbsp;&nbsp; 纬度： 33.20°&nbsp;&nbsp;经度： 103.82°&nbsp; &nbsp;风力级： 9.0&nbsp;&nbsp;参考位置： 浙江温州</h4>
         <hr class="head-border-yellow">
     </div>
 
     <div class="col-lg-12 col-md-12 col-xs-12">

         <h1>受灾区地图展示</h1>              
     </div>
     <div style="height:600px; width:100%; position:relative;">
         <div id="toolbar-container">
             <ul>
                 <li>
                     <i id="reset"><span class="glyphicon glyphicon-screenshot"> 复位</span></i>
                 </li>
                 <li>
                     <i onclick="measutreLength()"><span class="glyphicon glyphicon-minus"> 测线</span></i>
                 </li>
                 <li>
                     <i onclick="measutreArea()"><span class="glyphicon glyphicon-th-large"> 测面</span></i>
                 </li>
                 <li>
                     <i onclick="Point()"><span class="glyphicon glyphicon-adjust"> 画点</span></i>
                 </li>
                 <li>
                     <i onclick="Polyline()"><span class="glyphicon glyphicon-align-justify"> 画线</span></i>
                 </li>
                 <li>
                     <i onclick="Polygon()"><span class="glyphicon glyphicon-unchecked"> 画面</span></i>
                 </li>
                 <li>
                     <i onclick="refresh()"><span class="glyphicon glyphicon-trash"> 清除</span></i>
                 </li>
             </ul>
         </div>
         <p id="location" style="position:absolute;bottom:5px;z-index:50;padding-left:15px; background-color:rgba(167, 251, 246, 0.71);font-size:small" ;opacity="0.8"></p>
         <div id="map" style="width:100%;height:600px;border:solid 2px #EEEE00;"></div>
         <script src="js/myMap.js"></script>
     </div>
         
 </div>
</div>

<!-- ABOUT END -->
     
<!-- SERVICE -->
     
<div id="service">

  <div class="container">

    <div class="row">
    
     <div class="center-block head">
       
       <div class="col-lg-12 col-md-12 col-xs-12">
     
        <h1>受灾区地质资料展示区</h1>      
         <p class="subhead">Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod.</p>
       </div>
          
      </div>
      
        <!-- SERVICE COLUMNS -->   
        <div class="col-lg-4 col-md-4 service">
         <div class="service-col">
         
           <div class="icon-desktop rotate">
             <img src="img/icons/webdesign.png" alt="">
           </div>
           
          <h4>Web Design</h4>
          <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
          
         </div>
        </div>
        
        <div class="col-lg-4 col-md-4 service">
        <div class="service-col">
        
          <div class="icon-wrench rotate">
            <img src="img/icons/graphicdesign.png" alt="">
          </div>
           
          <h4>Graphic Design</h4>
          <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
          
          </div>
        </div>
        
        <div class="col-lg-4 col-md-4 service">
        <div class="service-col">
        
          <div class="icon-mobile rotate">
            <img src="img/icons/mobile.png" alt="">
           </div>
           
          <h4>Mobile App</h4>
          <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
          
        </div>
      </div>
      
      <div class="center-block service-btn">
         <p class="center"><a class="btn btn-hire btn-primary" href="#contact" role="button">Hire Us Now!</a></p>
      </div>
      
     </div>
   </div>
</div>

<!-- SERVICE END -->

<!-- PORTFOLIO -->



<div id="contact">

  <div class="container">
     <div class="row">
      <div class="center-block head">
       <div class="col-lg-12 col-md-12 col-xs-12">
         <h1>给我们留言</h1>
         <hr class="head-border-grey">
           <p class="center">如果你对资料和地图方面有任何需求，或者对专题有好的意见，请给我们留言</p>
       </div>
    </div>
      
      <!-- CONTACT FORM -->
      <div class="col-lg-8 col-md-8 col-lg-offset-2 col-md-offset-2 form">
      <!--FORM -->
      <form action="contact.php" class="form-horizontal" role="form" id="contactForm" method="post" name="contactForm">
            
            <div class="form-group">
               
                <div class="col-sm-12">
                <input type="text" class="form-control input-lg" name="name" id="name" placeholder="姓名*">
                </div>
            </div>
            
            <div class="form-group">
                  
                    <div class="col-sm-12">
                      <input type="email" class="form-control input-lg" name="email" id="email" placeholder="邮箱*">
                  </div>
            </div>
            
            <div class="form-group">
                  
                    <div class="col-sm-12">
                      <input type="text" class="form-control input-lg" name="phone" id="phone" placeholder="电话号码*">
                  </div>
            </div>
            
            <div class="form-group">
                  
                    <div class="col-sm-12">
                      <textarea class="form-control input-lg" rows="10" name="message" id="message" placeholder="留言信息*"></textarea>
                  </div>
            </div>
            <div class="control-group submit center">
               <input class="btn btn-lg btn-primary" type="submit" value="提交">
            </div>

           </form>          
      
      </div>
      
     </div>
  </div>
</div>
<div class="col-lg-12">
  <div class="up"><a href="#about"><span class="glyphicon glyphicon-chevron-up"></span></a></div>
</div>

<div id="foot">
  <div class="container">
     <div class="row">    
      <div class="col-lg-4 col-md-4">
          <div class="footer-default-one">
              <div class="sidebar-widget">
                  <div class="textwidget">
                      <p>                        
                          <br />主办单位：<a href="http://www.drc.cgs.gov.cn/" target="_blank">中国地质调查局发展研究中心<span class="fisshow">（全国地质资料馆）</span></a>
                      </p>
                      <p>服务机构：全国地质资料馆<span class="fisshow">（数据管理室）</span></p>
                      <p>技术支持：<a href="http://www.geo.today/" target="_blank"><span class="fisshow">江苏省</span>有色金属华东地质勘查局地质信息中心</a></p>
                      <p>备案号：京ICP备12005790号</p>                     
                  </div>                
              </div>              
          </div>
    </div>
    <div class="col-lg-4 col-md-4">
        <div class="footer-default-two">
            <div class="sidebar-widget linkdi">
                <p class="foot-heading">友情链接</p>
                <div class="links">
                    <p>
                        <a href="http://www.mlr.gov.cn/" target="_blank">中华人民共和国国土资源部</a><br>
                        <a href="http://www.cgs.gov.cn/" target="_blank">中国地质调查局</a><br>
                        <a href="http://oldweb.cqvip.com/" target="_blank">维普期刊资源整合服务平台</a><br>
                        <a href="http://www.wanfangdata.com.cn/" target="_blank">万方数据知识服务平台</a><br>
                        <a href="http://www.cnki.net/" target="_blank">CNKI期刊论文会议全文数据库</a>
                    </p>
                </div>             
            </div>        
        </div>
    </div>      
    <div class="col-lg-4 col-md-4">
            
        <div class="footer-default-three">
            <div class="sidebar-widget contus">
                <p class="foot-heading">联系我们</p>
                <ul class="social_icons myic">
                    <li class="tel">服务前台：010-58584100 </li>
                    <li class="tel">技术支持：010-58584202,010-58584200 </li>
                    <li class="email">support@mail.cgs.gov.cn </li>
                    <li class="address">北京市西城区阜外大街45号</li>
                    <li class="post">邮编:100037</li>
                </ul>
            </div>          
        </div>       
    </div>
          
           <div class="col-lg-12 col-md-12 footer" style="margin-top:30px">
               <p class="pull-right"><a href="#about"><img src="img/top.png"></a></p>
               <span>Copyright ©全国地质资料馆数据中心 &nbsp;&nbsp;&nbsp;&nbsp;备案号：京ICP备12005790号</span>

           </div> 
           
     </div>
  </div>
  
</div>

<!-- FOOTER END -->

<!-- COLOR SWITCH. Change Styles at the color.switch.css file -->

<div class="editor">

    <div class="panel">

      <h5>选择颜色</h5>
      
      <div id="changecss">
      
      <div class="row">
      
      <div class="circle-skin" ><a href="javascript: void(0)" title="switch styling" id="theme1"><div class="left skin1-l"></div><div class="right skin1-r"></div></a></div>
      
      <div class="circle-skin" ><a href="javascript: void(0)" title="switch styling" id="theme2"><div class="left skin2-l"></div><div class="right skin2-r"></div></a></div>
      
      <div class="circle-skin" ><a href="javascript: void(0)" title="switch styling" id="theme3"><div class="left skin3-l"></div><div class="right skin3-r"></div></a></div> 
      
      <div class="circle-skin" ><a href="javascript: void(0)" title="switch styling" id="theme4"><div class="left skin4-l"></div><div class="right skin4-r"></div></a></div> 
      
      <div class="circle-skin" ><a href="javascript: void(0)" title="switch styling" id="theme5"><div class="left skin5-l"></div><div class="right skin5-r"></div></a></div> 
      
      <div class="circle-skin" ><a href="javascript: void(0)" title="switch styling" id="theme6"><div class="left skin6-l"></div><div class="right skin6-r"></div></a></div> 
      
      </div>
      
      </div>
      
      <div class="clearfix"></div>
       

  </div>

     <div class="switch">
         <i class="fa fa-cog fa-spin fa-2x"></i>
     </div>

</div>

<!-- COLOR SWITCH END -->

<!-- END PRIMARY LAYOUT
====================== -->


<!-- JAVASCRIPT
================================================== -->

<!-- BOOTSTRAP JAVASCRIPT -->
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

<!-- CUSTOM JAVASCRIPT -->
<!-- Custom Functions -->
<script type="text/javascript" src="js/functions.js"></script> 

<!-- Portfolio with mixitup filter and prettyphoto -->
<script type="text/javascript" src="js/jquery.mixitup.min.js"></script> 
<!-- Magnific Popup core JS file -->
<script type="text/javascript" src="js/magnific.js"></script>

<!-- BxSlider -->
<script type="text/javascript" src="js/jquery.bxslider.min.js"></script>

<!-- Sequence Slider -->
<script type="text/javascript" src="js/jquery.sequence-min.js"></script>

<!-- Parallax Background -->
<script type="text/javascript" src="js/nbw-parallax.js"></script>
<script type="text/javascript" src="js/jquery.inview.js"></script>

<!-- Smooth Scrolling -->
<script type="text/javascript" src="js/smoothscroll.js"></script>

<!-- Sticky Navigation --> 
<script type="text/javascript" src="js/jquery.sticky.js"></script>

<!-- Style Switcher --> 
<script type="text/javascript" src="js/jquery.style-switcher.js"></script>

<!-- Clients Slider -->
<script type="text/javascript" src="js/jquery.flexisel.js"></script>

<!-- Retina JS -->
<script type="text/javascript" src="js/retina-1.1.0.min.js"></script>


</body>
</html>